import React, { useEffect, useReducer } from 'react';
import { findFilmsPage } from '@/api/MaiZuo';

import FilmItem from './FilmItem';
import FilmDetail from './FilmDetail';

import GlobalContext from './Context';
import { reducer, initialState } from './reducer';

import './css/index.css';

export default function App() {
  // 每次定义，都是一个全新的
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    findFilmsPage().then((res) => {
      dispatch({
        type: 'change-list',
        payload: res.films,
      });
    });

    return () => {};
  }, []);

  return (
    <GlobalContext.Provider
      value={{
        state,
        dispatch,
      }}>
      <div className='app'>
        <div>
          {state.list.map((item) => {
            return (
              <FilmItem
                key={item.filmId}
                {...item}></FilmItem>
            );
          })}
        </div>
        <div>
          <FilmDetail></FilmDetail>
        </div>
      </div>
    </GlobalContext.Provider>
  );
}
